<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ellipsoid Test</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script src="/GiswayEngine.js"></script>
    <script>
        const { GlobalScene, EllipsoidGeometry, EllipsoidMesh, three, Geodetic3D, Ellipsoid, GeometryUtil, ImageTileMesh } = GE; // 从GE对象中解构所需的类和对象
        var ellipsoidMesh;
        var globalScene;
        var center = new three.Vector3(0, 0, 0);
        var radius = new three.Vector3(6378137.0, 6378137.0, 6356752.3142451793);//(6378137.0, 6378137.0, 6356752.3142451793)  //1, 1, 0.99664
        let ellipsoid = new Ellipsoid(center, radius);  //new GE.three.Vector3(1, 1, 0.996647189335224)

        // 等待页面加载完成
        window.addEventListener('load', () => {
            // 访问全局GE对象中的EllipsoidTest类
            if (GE && GE.GlobalScene) {
                const texturePath = '/examples/resources/image/NE2_50M_SR_W_4096.jpg';
                ellipsoidMesh = new EllipsoidMesh(center, radius, 64, 64, texturePath);


                globalScene = new GlobalScene();
                globalScene.createScene();

                // 将网格添加到场景
                // globalScene.add(ellipsoidMesh);

                // addCurveLine();

                generatePolygon();

                // 监听render事件
                globalScene.addEventListener('render', () => {
                    // ellipsoidMesh.rotation.x += 0.01;
                    // ellipsoidMesh.rotation.y += 0.01;
                    //  ellipsoidMesh.rotation.z += 0.01;
                });

            } else {
                console.error('GlobalScene class not found in GE object');
            }
        });

        function addCurveLine() {
            let geodetic3D1 = new Geodetic3D(0, 0, 0);
            //let geodetic3D1 = new Geodetic3D(118.76769049871781, 31.828401267358743, 3000);
            let geodetic3D2 = new Geodetic3D(119.76769049871781, 31.888401267358743, 3000000);

            let ecefPoint1 = ellipsoid.toEcef(geodetic3D1);
            // console.log(ecefPoint1);

            let ecefPoint2 = ellipsoid.toEcef(geodetic3D2);
            // console.log(ecefPoint2);

            //生成基于地心坐标的曲线
            let curvePoints = ellipsoid.computeCurve(ecefPoint1, ecefPoint2, Math.PI / 100, false, true);
            drawCurveLine(curvePoints, ellipsoid, '#FF0000');

            //生成基于大地坐标的曲线
            curvePoints = ellipsoid.computeCurve(ecefPoint1, ecefPoint2, Math.PI / 100, false, false);
            drawCurveLine(curvePoints, ellipsoid, '#0000FF');
        }

        function drawCurveLine(curvePoints, ellipsoid, lineColor) {
            // console.log('---------------');
            curvePoints.forEach(element => {
                let geographyPoint = ellipsoid.toGeography(element);
                // console.log(geographyPoint);
            });

            const material = new three.LineBasicMaterial({ //
                color: lineColor
            });

            const points = [];
            curvePoints.forEach(element => {
                points.push(element);
            });

            const geometry = new three.BufferGeometry().setFromPoints(points);

            const line = new three.Line(geometry, material);
            globalScene.add(line);
        }

        function generatePolygon() {
            // let geodetic3D1 = new Geodetic3D(74.94749291502359, 19.5890421942577, 0);
            // let geodetic3D2 = new Geodetic3D(76.2338881978793, -16.21081172211301, 0);
            // let geodetic3D3 = new Geodetic3D(113.3098654795894, -15.8653264211359, 0);
            // let geodetic3D4 = new Geodetic3D(107.23528416776168, 24.9740319678414, 0);
            // let geoPointArray = [geodetic3D1, geodetic3D2, geodetic3D3, geodetic3D4];
            // let testMesh = GeometryUtil.test(geoPointArray);
            // globalScene.add(testMesh);

            // let geoPointArray2 = [
            //     new Geodetic3D(-22.035780342417493,  25.652824917730207, 1000000),
            //     new Geodetic3D(-15.036761789255902,  -22.9198195300547, 1000000),
            //     new Geodetic3D(54.77487200337165,  -21.14417009199964, 1000000),
            //     new Geodetic3D(46.06099298778647,  30.224488632545512, 1000000)
            // ];
            // let testMesh2 = GeometryUtil.test(geoPointArray2);
            // globalScene.add(testMesh2);

            // let geoPointArray3 = [
            //     new Geodetic3D(119.13059197023057, 25.200674095179437, 1000000),
            //     new Geodetic3D(124.12088941108291, 4.727668409644133, 0),
            //     new Geodetic3D(144.8056116458559, 8.333233956126369, 0),
            //     new Geodetic3D(160.11750368917802, 21.19718959420569, 0),
            //     new Geodetic3D(148.45386109245462, 31.37565767857444, 0),
            //     new Geodetic3D(131.0158292551367, 29.617094893034146, 0)             
            // ];
            // let testMesh3 = GeometryUtil.test(geoPointArray3);
            // globalScene.add(testMesh3);


            // let geoPointArray = [
            //     new Geodetic3D(67.44971275115903, 24.681330805514055, 0),
            //     new Geodetic3D(70.66842571543197, -9.935329877057871, 0),
            //     new Geodetic3D(91.75752817134604, -7.400963267362253, 0),
            //     new Geodetic3D(88.93019076941236, 24.519005722864506, 0),
            // ];
            // let testMesh = GeometryUtil.test(geoPointArray, 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/2/1/2');
            // globalScene.add(testMesh);

            // let geoPointArray2 = [
            //     new Geodetic3D(88.93019076941236, 24.519005722864506, 0),
            //     new Geodetic3D(91.75752817134604, -7.400963267362253, 0),
            //     new Geodetic3D(119.6821656486312, 0.4070726579360634, 0),
            //     new Geodetic3D(122.09139454471055, 31.58504442604484, 0)
            // ];
            // let testMesh2 = GeometryUtil.test(geoPointArray2, 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/2/1/3');
            // globalScene.add(testMesh2);

            // //{ leftTopPoint: Geodetic3D, leftDownPoint: Geodetic3D, rightTopPoint: Geodetic3D, rightDownPoint: Geodetic3D } 
            // let pointResult = GeometryUtil.computeTilePoints(1, 1, 3);
            // let geoPointArray = [
            //     pointResult.leftTopPoint,
            //     pointResult.leftDownPoint,
            //     pointResult.rightDownPoint,
            //     pointResult.rightTopPoint
            // ];
            // // https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}
            // // '/examples/resources/image/beauty.jpg'
            // let testMesh = GeometryUtil.test(geoPointArray, 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/3/1/1');
            // globalScene.add(testMesh);

            // loadTile(0, 0, 2);
            // loadTile(1, 0, 2);
            // for(let i=0; i<16; i++){
            //     for(let j=0; j<16; j++){
            //         loadTile(i, j, 4);
            //     }
            // }

            // for (let i = 0; i < 8; i++) {
            //     for (let j = 0; j < 8; j++) {
            //         loadTile2(i, j, 3);
            //     }
            // }

            //  for(let i=0; i<32; i++){
            //     for(let j=0; j<32; j++){
            //         loadTile(i, j, 5);
            //     }
            // }

            // loadTile(0, 0, 3);
            // loadTile(1, 0, 3);
            // loadTile(2, 0, 3);
            // loadTile(3, 0, 3);
            // loadTile(4, 0, 3);
            // loadTile(5, 0, 3);
            // loadTile(6, 0, 3);
            // loadTile(7, 0, 3);


            // let ecefPoint1 = ellipsoid.toEcef(geodetic3D1);
            // let ecefPoint2 = ellipsoid.toEcef(geodetic3D2);
            // let ecefPoint3 = ellipsoid.toEcef(geodetic3D3);
            // let ecefPoint4 = ellipsoid.toEcef(geodetic3D4);

            // let ecefPointArray = [ecefPoint1, ecefPoint2, ecefPoint3, ecefPoint4];
            // let ecefPointArray2 = [];
            // for(let i=ecefPointArray.length-1; i>=0; i--){
            //     ecefPointArray2.push(ecefPointArray[i]);
            // }
            // let earClipData = GeometryUtil.earClipping(ecefPointArray2, true);
            // console.log(earClipData)
        }

        function loadTile(tileX, tileY, tileZ) {
            let pointResult = GeometryUtil.computeTilePoints(tileX, tileY, tileZ);
            console.log(pointResult)
            let geoPointArray = [
                pointResult.leftTopPoint,
                pointResult.leftDownPoint,
                pointResult.rightDownPoint,
                pointResult.rightTopPoint
            ];
            // https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}
            // '/examples/resources/image/beauty.jpg'

            // let testMesh1 = GeometryUtil.test(geoPointArray);
            // globalScene.add(testMesh1);

            let testMesh2 = GeometryUtil.test(geoPointArray, 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/' + tileZ + '/' + tileY + '/' + tileX);
            globalScene.add(testMesh2);
        }

        function loadTile2(tileX, tileY, tileZ) {
            let param = { tileNum: { x: tileX, y: tileY, z: tileZ }, urlBase: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/' }
            let tileMesh = new ImageTileMesh(param);
            globalScene.add(tileMesh);
        }
    </script>
</body>

</html>